<!--
 * @Author: fcli
 * @Date: 2023-09-04 10:34:58
 * @LastEditors: fcli
 * @LastEditTime: 2023-11-07 14:57:05
 * @FilePath: /vue-cascade-panel/src/plugin/index.vue
 * @Description: 
-->
<template>
    <div class="cascade-panel">
        <div class="menu-item" :class="['level_' + propsIndex]">
            <div class="slot-item" v-for="(item, index) in datalist" :key="index" @click="change(index)"
                :class="[Number(index) == childActiveId ? 'active' : '']">
                <slot name="slotScope" :data="item"></slot>
            </div>
        </div>
        <div class="menu-item" :class="['out_level_' + (propsIndex + 1)]"
            v-if="datalist[childActiveId] && datalist[childActiveId].children">
            <cascade-panel ref="cascadeRef" :datalist="datalist[childActiveId].children" :propsIndex="propsIndex + 1"
                v-on:patch="onPatch">
                <template #slotScope="slotProps">
                    <slot name="slotScope" :data="slotProps.data"></slot>
                </template>
            </cascade-panel>
        </div>
    </div>
</template>
<script lang="ts" >
export default {
    name: 'cascadePanel',
}
</script>
<script lang="ts" setup>
import { ref, defineProps } from 'vue';
const props = defineProps({
    datalist: { default: [], type: Array<any> },
    propsIndex: {
        default: 1,
        type: Number
    }
});
const emit = defineEmits(['patch'])
const childActiveId = ref(0);
const cascadeRef = ref<any>(null);
const init = () => {
    childActiveId.value = 0;
    cascadeRef.value && cascadeRef.value.init();
};
const change = (index: number) => {
    init();
    //点击之后下一个组件显示，activeId初始化0
    childActiveId.value = index
    if (!props.datalist[childActiveId.value].children) {
        emit("patch", props.datalist[childActiveId.value].label);
    }
}
const onPatch = (val: any) => {
    var checkedVal = props.datalist[childActiveId.value].label + "/" + val;
    emit("patch", checkedVal);
}
defineExpose({init})

</script>
<style>
.cascade-panel {
    display: flex;
}
</style>